<template>
  <div class="order-goods-item">
    <div class="order-goods-item-info clearfix">
      <template v-if="order.goodsList===null||order.isSame">
        <div v-if="order.activityName">商品：{{order.activityName}}</div>
        <div v-if="order.status===1||order.status===2">支付时间：{{order.getDatetimeValue('payTime','YYYY-MM-DD HH:mm:ss')}}</div>
        <div v-else-if="order.status===3">退款时间：{{order.getDatetimeValue('refuseTime','YYYY-MM-DD HH:mm:ss')}}</div>
        <div v-else-if="order.status===-1">取消时间：{{order.getDatetimeValue('cancelTime','YYYY-MM-DD HH:mm:ss')}}</div>
      </template>

      <div style="color:#ffa500">优惠：{{order.preferentialPrice}}</div>
      <div style="color:#f56c6c">实付：{{order.totalPrice}}</div>
      <div v-if="order.refusePrice!==0" style="color:#67c23a">退款：{{order.refusePrice}}</div>
    </div>

    <div class="order-goods-item-data" v-if="order.goodsList!==null">
      <el-table fit stripe border :data="order.goodsList">
        <el-table-column :resizable="false" prop="orderNoSub" label="子订单号" width="170px" align="center"></el-table-column>
        <el-table-column prop="name" label="商品" min-width="120px" header-align="center"></el-table-column>
        <el-table-column prop="modelName" label="规格" min-width="100px" header-align="center"></el-table-column>
        <el-table-column prop="price" label="单价" min-width="80px" align="center"></el-table-column>
        <el-table-column prop="count" label="数量" min-width="80px" align="center"></el-table-column>
        <el-table-column prop="payPrice" label="总价" min-width="80px" align="center"></el-table-column>
        <el-table-column :resizable="false" label="配送方式" width="80px" align="center">
          <template slot-scope="scope">
            <span>{{i18n.getMsg(`orderMgr.buyMethod.${scope.row.buyMethod}`)}}</span>
          </template>
        </el-table-column>

        <template v-if="!order.isSame">
          <el-table-column :resizable="false" label="时间" width="200px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status===1||scope.row.status===2">
                支付:{{scope.row.getDatetimeValue('payTime','YYYY-MM-DD HH:mm:ss')}}
              </span>
              <span v-else-if="scope.row.status===3">
                退款:{{scope.row.getDatetimeValue('refuseTime','YYYY-MM-DD HH:mm:ss')}}
              </span>
            </template>
          </el-table-column>
        </template>

        <el-table-column v-if="hasRefund" label="退款金额" min-width="80px" align="center">
          <template slot-scope="scope" v-if="scope.row.refusePrice!==0">
            <span>{{scope.row.refusePrice}}</span>
          </template>
        </el-table-column>

        <el-table-column :resizable="false" label="状态" width="80px" align="center">
          <template slot-scope="scope">
            <span>{{i18n.getMsg(`orderMgr.status.${scope.row.status}`)}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      order: {
        type: Object,
        required: true
      }
    },

    data() {
      return {
        hasRefund:this.checkHasRefund()
      };
    },

    methods:{
      checkHasRefund(){
        let goodsList = this.order.goodsList;
        for (let i = 0; i < goodsList.length; i++) {
          const goods = goodsList[i];
          if (goods.status === 3) {
            return true;
          }
        }
        return false;
      }
    }
  };

</script>

<style lang="scss" scoped>
  .order-goods-item {
    margin-left: -10px;
    margin-right: -10px;

    .order-goods-item-info {
      >div {
        float: left;
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        margin-right: 20px;
        margin-bottom: 10px;
      }
    }
  }

</style>
